<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>证件水印添加工具</title>
    <style>
        :root {
            --primary-color: #4285f4;
            --secondary-color: #34a853;
            --danger-color: #ea4335;
            --text-color: #333;
            --light-gray: #f5f5f5;
            --border-color: #ddd;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: var(--light-gray);
            padding: 15px;
            color: var(--text-color);
            line-height: 1.6;
        }
        
        .container {
            max-width: 100%;
            margin: 0 auto;
        }
        
        .card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        h1 {
            font-size: 1.5rem;
            text-align: center;
            margin-bottom: 20px;
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .upload-area {
            border: 2px dashed var(--border-color);
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            margin-bottom: 20px;
            background-color: white;
            position: relative;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .upload-area.active {
            border-color: var(--primary-color);
            background-color: rgba(66, 133, 244, 0.05);
        }
        
        .upload-icon {
            font-size: 48px;
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .upload-text {
            color: #666;
            font-size: 0.9rem;
        }
        
        #imagePreview, #watermarkedPreview {
            max-width: 100%;
            max-height: 300px;
            margin: 0 auto;
            display: none;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 15px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            margin: 8px 0;
            width: 100%;
            font-weight: 500;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .btn:hover {
            background-color: #3367d6;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .btn-secondary {
            background-color: var(--secondary-color);
        }
        
        .btn-secondary:hover {
            background-color: #2d9249;
        }
        
        .btn-danger {
            background-color: var(--danger-color);
        }
        
        .btn-danger:hover {
            background-color: #d33426;
        }
        
        .control-group {
            margin-bottom: 18px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }
        
        input[type="text"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            transition: border 0.2s ease;
        }
        
        input[type="text"]:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
        }
        
        input[type="range"] {
            width: 100%;
            -webkit-appearance: none;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            margin: 10px 0;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease;
        }
        
        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.1);
        }
        
        select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            background-color: white;
            transition: all 0.2s ease;
        }
        
        select:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
        }
        
        .value-display {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: #666;
            margin-top: -5px;
        }
        
        .hidden {
            display: none;
        }
        
        .watermark-preview {
            position: relative;
            margin-top: 20px;
            text-align: center;
        }
        
        .preview-title {
            font-size: 1rem;
            color: #555;
            margin-bottom: 10px;
            font-weight: 500;
        }
        
        .divider {
            height: 1px;
            background-color: var(--border-color);
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📝 证件水印添加工具</h1>
        
        <div class="card">
            <div class="upload-area" id="uploadArea">
                <div class="upload-icon">📁</div>
                <p class="upload-text">点击或拖拽上传证件图片</p>
                <input type="file" id="imageUpload" accept="image/*" style="display: none;">
                <img id="imagePreview" alt="预览图">
            </div>
        </div>
        
        <div class="card">
            <h2>水印设置</h2>
            <div class="control-group">
                <label for="watermarkText">水印文字内容</label>
                <input type="text" id="watermarkText" placeholder="例如: 仅供办理XX业务使用" value="仅供办理XX业务使用">
            </div>
            
            <div class="control-group">
                <label for="watermarkOpacity">水印透明度</label>
                <input type="range" id="watermarkOpacity" min="1" max="100" value="50">
                <div class="value-display">
                    <span>透明</span>
                    <span id="opacityValue">50%</span>
                    <span>不透明</span>
                </div>
            </div>
            
            <div class="control-group">
                <label for="watermarkSize">水印文字大小</label>
                <input type="range" id="watermarkSize" min="10" max="50" value="24">
                <div class="value-display">
                    <span>小</span>
                    <span id="sizeValue">24px</span>
                    <span>大</span>
                </div>
            </div>
            
            <div class="control-group">
                <label for="watermarkColor">水印颜色</label>
                <select id="watermarkColor">
                    <option value="black">黑色</option>
                    <option value="white">白色</option>
                    <option value="red">红色</option>
                    <option value="blue">蓝色</option>
                    <option value="gray">灰色</option>
                </select>
            </div>
            
            <div class="control-group">
                <label for="watermarkAngle">水印旋转角度</label>
                <input type="range" id="watermarkAngle" min="0" max="360" value="0">
                <div class="value-display">
                    <span>0°</span>
                    <span id="angleValue">0°</span>
                    <span>360°</span>
                </div>
            </div>
            
            <div class="control-group">
                <label for="watermarkDensity">水印密度</label>
                <input type="range" id="watermarkDensity" min="10" max="100" value="50">
                <div class="value-display">
                    <span>稀疏</span>
                    <span id="densityValue">50%</span>
                    <span>密集</span>
                </div>
            </div>
            
            <div class="control-group">
                <label for="watermarkLineHeight">水印行间距</label>
                <input type="range" id="watermarkLineHeight" min="50" max="300" value="150">
                <div class="value-display">
                    <span>窄</span>
                    <span id="lineHeightValue">150%</span>
                    <span>宽</span>
                </div>
            </div>
            
            <button id="applyWatermark" class="btn">✨ 应用水印效果</button>
            <button id="resetAll" class="btn btn-danger">🔄 重置所有设置</button>
        </div>
        
        <div class="card watermark-preview hidden" id="previewCard">
            <p class="preview-title">水印效果预览</p>
            <img id="watermarkedPreview" alt="带水印的预览图">
            <div class="divider"></div>
            <button id="downloadBtn" class="btn btn-secondary">💾 下载带水印图片</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const uploadArea = document.getElementById('uploadArea');
            const imageUpload = document.getElementById('imageUpload');
            const imagePreview = document.getElementById('imagePreview');
            const watermarkedPreview = document.getElementById('watermarkedPreview');
            const watermarkText = document.getElementById('watermarkText');
            const watermarkOpacity = document.getElementById('watermarkOpacity');
            const opacityValue = document.getElementById('opacityValue');
            const watermarkSize = document.getElementById('watermarkSize');
            const sizeValue = document.getElementById('sizeValue');
            const watermarkColor = document.getElementById('watermarkColor');
            const watermarkAngle = document.getElementById('watermarkAngle');
            const angleValue = document.getElementById('angleValue');
            const watermarkDensity = document.getElementById('watermarkDensity');
            const densityValue = document.getElementById('densityValue');
            const watermarkLineHeight = document.getElementById('watermarkLineHeight');
            const lineHeightValue = document.getElementById('lineHeightValue');
            const applyWatermark = document.getElementById('applyWatermark');
            const resetAll = document.getElementById('resetAll');
            const downloadBtn = document.getElementById('downloadBtn');
            const previewCard = document.getElementById('previewCard');
            
            // 当前上传的图片
            let currentImage = null;
            
            // 上传区域点击事件
            uploadArea.addEventListener('click', function() {
                imageUpload.click();
            });
            
            // 拖拽上传功能
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                uploadArea.classList.add('active');
            });
            
            uploadArea.addEventListener('dragleave', function() {
                uploadArea.classList.remove('active');
            });
            
            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                uploadArea.classList.remove('active');
                
                if (e.dataTransfer.files.length) {
                    const file = e.dataTransfer.files[0];
                    if (file.type.match('image.*')) {
                        handleImageUpload(file);
                    } else {
                        alert('请上传图片文件');
                    }
                }
            });
            
            // 文件选择事件
            imageUpload.addEventListener('change', function(e) {
                if (e.target.files.length) {
                    handleImageUpload(e.target.files[0]);
                }
            });
            
            // 处理图片上传
            function handleImageUpload(file) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    imagePreview.src = e.target.result;
                    imagePreview.style.display = 'block';
                    currentImage = new Image();
                    currentImage.src = e.target.result;
                    
                    // 隐藏上传提示
                    uploadArea.querySelector('.upload-icon').style.display = 'none';
                    uploadArea.querySelector('.upload-text').style.display = 'none';
                };
                
                reader.readAsDataURL(file);
            }
            
            // 更新滑块值显示
            watermarkOpacity.addEventListener('input', function() {
                opacityValue.textContent = this.value + '%';
            });
            
            watermarkSize.addEventListener('input', function() {
                sizeValue.textContent = this.value + 'px';
            });
            
            watermarkAngle.addEventListener('input', function() {
                angleValue.textContent = this.value + '°';
            });
            
            watermarkDensity.addEventListener('input', function() {
                densityValue.textContent = this.value + '%';
            });
            
            watermarkLineHeight.addEventListener('input', function() {
                lineHeightValue.textContent = this.value + '%';
            });
            
            // 应用水印
            applyWatermark.addEventListener('click', function() {
                if (!currentImage) {
                    alert('请先上传图片');
                    return;
                }
                
                // 等待图片加载完成
                if (!currentImage.complete) {
                    currentImage.onload = function() {
                        applyWatermarkToImage();
                    };
                    return;
                }
                
                applyWatermarkToImage();
            });
            
            function applyWatermarkToImage() {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                
                // 设置画布大小为图片大小
                canvas.width = currentImage.width;
                canvas.height = currentImage.height;
                
                // 绘制原始图片
                ctx.drawImage(currentImage, 0, 0);
                
                // 水印设置
                const text = watermarkText.value || '水印';
                const opacity = parseInt(watermarkOpacity.value) / 100;
                const size = parseInt(watermarkSize.value);
                const color = watermarkColor.value;
                const angle = parseInt(watermarkAngle.value) * Math.PI / 180;
                const density = parseInt(watermarkDensity.value) / 100;
                const lineHeight = parseInt(watermarkLineHeight.value) / 100;
                
                // 设置水印样式
                ctx.font = `bold ${size}px Arial`;
                ctx.fillStyle = color;
                ctx.globalAlpha = opacity;
                
                // 计算水印文字宽度
                const textWidth = ctx.measureText(text).width;
                
                // 计算水印间距 - 改进后的算法
                const spacingX = textWidth * (1.5 / density);
                const spacingY = size * 2 * lineHeight;
                
                // 绘制水印
                ctx.save();
                ctx.translate(canvas.width / 2, canvas.height / 2);
                ctx.rotate(angle);
                ctx.translate(-canvas.width / 2, -canvas.height / 2);
                
                // 从左上角开始绘制，确保覆盖整个图片
                const startX = -textWidth * 2;
                const startY = -size * 2;
                const endX = canvas.width + textWidth * 2;
                const endY = canvas.height + size * 2;
                
                for (let x = startX; x < endX; x += spacingX) {
                    for (let y = startY; y < endY; y += spacingY) {
                        ctx.fillText(text, x, y);
                    }
                }
                
                ctx.restore();
                
                // 显示带水印的图片
                watermarkedPreview.src = canvas.toDataURL('image/png');
                watermarkedPreview.style.display = 'block';
                previewCard.classList.remove('hidden');
                
                // 自动滚动到预览区域
                previewCard.scrollIntoView({ behavior: 'smooth' });
            }
            
            // 下载图片
            downloadBtn.addEventListener('click', function() {
                if (!watermarkedPreview.src) return;
                
                const link = document.createElement('a');
                link.download = 'watermarked_' + Date.now() + '.png';
                link.href = watermarkedPreview.src;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
            
            // 重置所有
            resetAll.addEventListener('click', function() {
                imagePreview.src = '';
                imagePreview.style.display = 'none';
                watermarkedPreview.src = '';
                watermarkedPreview.style.display = 'none';
                uploadArea.querySelector('.upload-icon').style.display = 'block';
                uploadArea.querySelector('.upload-text').style.display = 'block';
                currentImage = null;
                previewCard.classList.add('hidden');
                
                // 重置表单
                watermarkText.value = '仅供办理XX业务使用';
                watermarkOpacity.value = 50;
                opacityValue.textContent = '50%';
                watermarkSize.value = 24;
                sizeValue.textContent = '24px';
                watermarkColor.value = 'black';
                watermarkAngle.value = 0;
                angleValue.textContent = '0°';
                watermarkDensity.value = 50;
                densityValue.textContent = '50%';
                watermarkLineHeight.value = 150;
                lineHeightValue.textContent = '150%';
            });
        });
    </script>
</body>
</html>